<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <!-- 栅格 -->
    <el-row :gutter="20">
      <!-- 个人信息区域 -->
      <el-col :span="8">
        <el-card>
          <span>个人信息</span>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <!-- 头像区域 -->
          <div class="user-header">
            <!-- 上传头像 -->
            <el-upload
              class="header-upload-btn user-header-com imgUpload"
              :action="uploadActionUrl"
              :headers="uploadActionHeader"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="myInfo.avatarId > 0"
                alt=""
                :src="imgStr"
                class="imgSize"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <!-- 头像信息提示区域 -->
            <p class="tip">
              <span class="error">{{ errorStr }}</span>
            </p>
          </div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <!-- 用户名 -->
          <i class="el-icon-s-custom"> 用户名称</i>
          <el-tag>{{ uname }}</el-tag>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <!-- 昵称 -->
          <i class="el-icon-user-solid"> 用户昵称</i>
          <el-tag>{{ myInfo.nickname }}</el-tag>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <!-- 手机号 -->
          <i class="el-icon-phone"> 手机号码</i>
          <el-tag>{{ myInfo.telephoneNumber }}</el-tag>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <!-- 邮箱 -->
          <i class="el-icon-message"> 邮箱号码</i>
          <el-tag>{{ myInfo.email }}</el-tag>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <!-- 创建时间 -->
          <i class="el-icon-date"> 创建时间</i>
          <el-tag>{{ myInfo.createdTime }}</el-tag>
          <el-divider></el-divider>
          <!-- 地址管理 -->
          <i class="el-icon-house"> 收货地址</i>
          <el-tag>{{ myInfo.address }}</el-tag>
        </el-card>
      </el-col>
      <!-- 基本资料区域 -->
      <el-col :span="16">
        <el-card>
          <span>基本资料</span>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <!-- 内容主体区域 -->
          <el-form
            :model="baseForm"
            :rules="baseFormRules"
            ref="baseFormRef"
            label-width="100px"
          >
            <el-form-item label="用户昵称" prop="nickname">
              <el-input v-model.trim="baseForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="telephoneNumber">
              <el-input v-model.trim="baseForm.telephoneNumber"></el-input>
            </el-form-item>
            <el-form-item label="邮箱号码" prop="email">
              <el-input v-model.trim="baseForm.email"></el-input>
            </el-form-item>
            <div>
              <el-form-item label="省市区/县" prop="address1">
                <el-cascader
                  :options="CityData"
                  v-model="baseForm.address1"
                  clearable
                  filterable
                  :props="{ expandTrigger: 'hover' }"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="详细地址" prop="address2">
                <el-input
                  v-model="baseForm.address2"
                  :placeholder="addre()"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
          <!-- 底部按钮区域 -->
          <div class="btn">
            <el-button type="primary" @click="addMyInfo">确 定</el-button>
            <el-button type="info" @click="resetFields">重 置</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//导入文件
import CityData from '../assets/js/allcitydata'
export default {
  data () {
    // 自定义手机号的正则表达式
    const checkPhoneNumber = (rule, value, cb) => {
      const regPhone =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (regPhone.test(value)) {
        return cb();
      }
      cb(new Error("手机号码格式不正确"));
    }
    return {
      // 城市数据
      CityData,
      // 存储从数据库接收的用户个人信息
      myInfo: [],
      // 获取当前登录用户的id
      uId: window.localStorage.getItem("userId"),
      // 获取当前登录用户的用户名
      uname: window.localStorage.getItem("username"),
      // 头像上传区的图片
      imgStr: "",
      // 头像超出大小提示信息
      errorStr: "",
      // 基本资料表单的数据绑定对象
      baseForm: {},
      // 基本资料表单的验证规则绑定对象
      baseFormRules: {
        // 用户昵称
        nickname: [
          { required: true, message: "请填写用户昵称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          }
        ],
        // 手机号码
        telephoneNumber: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: checkPhoneNumber, trigger: "blur" }
        ],
        // 邮箱号码
        email: [
          { required: true, message: "请输入邮箱号码", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }
        ],
        // 省市县
        address1: [{ required: true, message: "请选择地址", trigger: "blur" }],
        // 详细地址
        address2: [{ required: true, message: "请输入详细地址", trigger: "blur" }]
      },
      // 头像
      dialogFormFullUrl: "",
      formData: {
        avatarId: 0
      },
      // 详细地址
      addr: ''
    }
  },
  created () {
    // 调用获取用户个人信息的方法
    this.getUserInfo()
  },
  // 计算属性
  computed: {
    // 头像上传api接口需要token验证
    uploadActionHeader () {
      return {
        Authorization: "Bearer " + window.localStorage.getItem("token"),
      }
    },
    // 头像上传的api地址
    uploadActionUrl () {
      const baseUrl = "https://api.h1234.top/"
      const uploadUrl = "files/uploadfiles"
      return baseUrl + uploadUrl
    }
  },
  methods: {
    // 阴影详细地址
    addre () {
      // 详细地址赋值
      return this.addr
    },
    // 获取用户个人信息资料
    async getUserInfo () {
      // 往数据库中发送请求
      const { data: res } = await this.$http.get("users/id/" + this.uId)
      if (res.meta.status !== 200) {
        // 用户个人信息资料获取失败
        this.$message.error("用户个人信息资料获取失败！")
      } else {
        // 用户个人信息资料获取成功
        // 个人信息赋值
        this.myInfo = res.data
        // 基本资料赋值
        this.baseForm = this.myInfo
        // 省市县赋值
        this.baseForm.address1 = res.data.address.split(' ')[0].split(',')
        // 详细地址赋值
        this.addr = res.data.address.split(' ')[1]
        // 头像赋值
        this.imgStr = `https://api.h1234.top/files/${res.data.avatarId}`
        // 将头像id重新赋值给formData.avatarId，防止没有更改头像，更新其他信息时，头像会消失
        this.formData.avatarId = res.data.avatarId
      }
    },
    // 确认更新用户个人信息
    addMyInfo () {
      // 对表单进行预验证
      this.$refs.baseFormRef.validate(async (valid) => {
        if (!valid) {
          // 预验证不通过
          this.$message.error("请按照提示要求填写内容！")
        } else {
          // 预验证通过
          // 往数据库中更新信息
          const { data: res } = await this.$http.put("users/" + this.uId, {
            // 1 代表编辑用户个人信息
            modType: 1,
            // 用户昵称
            nickname: this.baseForm.nickname,
            // 手机号码
            telephoneNumber: this.baseForm.telephoneNumber,
            // 邮箱号码
            email: this.baseForm.email,
            // 头像Id
            avatarId: this.formData.avatarId,
            // 收获地址
            address: this.baseForm.address1 + ' ' + this.baseForm.address2
          })
          if (res.meta.status !== 200) {
            // 更新信息失败
            this.$message.success("用户信息更新失败！")
          } else {
            // 更新信息成功
            this.$message.success("用户信息更新成功！")
            // 刷新浏览器
            window.location.reload()
          }
        }
      })
    },
    // 重置个人信息按钮
    resetFields () {
      // 重置表单数据
      this.$refs.baseFormRef.resetFields()
    },
    // 头像上传前的钩子函数，用于检测上传文件的大小、类型等
    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg"
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式！")
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB！")
      }
      return isJPG && isLt2M
    },
    // 头像上传成功后调用的方法
    handleAvatarSuccess (res, file) {
      const fullPath = URL.createObjectURL(file.raw)
      this.formData.avatarId = res.data[0].id
      this.dialogFormFullUrl = fullPath
    }
  }
}
</script>

<style lang="css" scoped>
/* tag标签距离左侧名称的距离 */
.el-tag {
  margin-left: 131px;
}

/* 保存和重置按钮居中 */
.btn {
  display: flex;
  justify-content: center;
}

/* 头像大小和倒角 */
.imgSize {
  width: 100px;
  height: 100px;
  border-radius: 60px;
}
/* 头像居中 */
.imgUpload {
  display: flex;
  justify-content: center;
}
</style>
